<!--
* @author wn
* @date 2022/07/20 15:43:00
* @description: QQ 回调页面
!-->
<template>
	<!-- 初始化 判断是否QQ 登陆 加载页面 -->
	<section class="load container" v-if="bindQQ"></section>
	<section class="call-back container" v-else>
		<nav>
			<a
				href="javascript:;"
				@click="bindOrPatch = 'CallBackBind'"
				:class="{ active: bindOrPatch === 'CallBackBind' }"
			>
				<i class="iconfont icon-bind" />
				<span>已有小兔鲜账号，请绑定手机</span>
			</a>
			<a
				href="javascript:;"
				@click="bindOrPatch = 'CallBackPatch'"
				:class="{ active: bindOrPatch === 'CallBackPatch' }"
			>
				<i class="iconfont icon-edit" />
				<span>没有小兔鲜账号，请完善资料</span>
			</a>
		</nav>
		<!-- 切换 绑定 与 注册 组件 -->
		<component :is="bindOrPatch" :openId="myOpenId"></component>
	</section>
</template>
<script>
import { ref } from 'vue'
import CallBackBind from './components/CallBackBind'
import CallBackPatch from './components/CallBackPatch'
import QC from 'qc'
import { userQQLogin } from '@/network/user'
// import { useStore } from 'vuex'
// import { useRouter } from 'vue-router'
// import Message from '@/components/library/message'
import { useQQLoginSavePush } from '@/hooks'

export default {
	name: 'CallBack',
	components: { CallBackBind, CallBackPatch },
	setup() {
		// 切换 绑定 与 注册 组件
		const bindOrPatch = ref('CallBackBind')
		// 是否显示  load.gif
		const bindQQ = ref(true)
		// const store = useStore()
		// const router = useRouter()
		// 存储qq用户的身份表示openId
		const myOpenId = ref('')
		// 默认 小兔鲜儿账号和qq号已绑定
		/*
		    步骤：
        1.  检查QQ是否授权登录=>window.QC.Login.check() true 已经登陆
        2.  如果授权登录 getMe获取openId
        3.  使用openId获取后台用户数据存vuex
        4.  跳转首页 或者来源页
		*/
		QC.Login.check() &&
			QC.Login.getMe(async openId => {
				myOpenId.value = openId
				// 后台接口
				/* try {
				const { result } = await userQQLogin(openId)
					const { id, avatar, nickName, account, mobile, token } = result
					store.commit('user/setUser', {
						id,
						avatar,
						nickName,
						account,
						mobile,
						token,
					})
					router.push(store.state.user.redirectUrl)
					Message({ type: 'success', message: 'QQ登录成功' })
				} catch (error) {
					// 登陆失败  显示  回调页
					bindQQ.value = false
				} */

				// hook
				try {
					await useQQLoginSavePush(() => userQQLogin(openId))
				} catch (error) {
					bindQQ.value = false
				}
			})
		return { bindOrPatch, bindQQ, myOpenId }
	},
}
</script>
<style scoped lang="less">
.load.container {
	min-height: 700px;
	margin: 25px auto;
	border-radius: 12px;
	background: #fff url(~@/assets/images/load.gif) no-repeat center / 200px 200px;
}
.call-back {
	min-height: 700px;
	background-color: #fff;
	margin: 25px auto;
	border-radius: 12px;
	nav {
		display: flex;
		padding-top: 40px;
		margin: 0 270px;
		a {
			flex: 1;
			text-align: center;
			color: #666;
			font-size: 18px;
			line-height: 40px;
			border-bottom: 2px solid #e4e4e4;
			i {
				font-size: 22px;
				margin-right: 4px;
				vertical-align: middle;
			}
			span {
				vertical-align: middle;
			}
			&.active {
				color: @xtxColor;
				border-color: @xtxColor;
			}
		}
	}
}
</style>
